!
<!--  -->
<template>
  <div>
    <!-- 头部信息 -->
    <div class="header">
      <div class="searching">
        <el-form ref="formRef" :inline="true" v-model="formLine" class="demo-form-inline">
          <el-form-item label="客户名称">
            <el-input v-model="formLine.customerName" placeholder="客户名称"></el-input>
          </el-form-item>

          <el-form-item label="客户简称">
            <el-input
              v-model="formLine.customerAbbreviation"
              placeholder="客户简称"
            ></el-input>
          </el-form-item>

          <el-form-item label="国家">
            <el-input v-model="formLine.countriseRegions" placeholder="国家"></el-input>
          </el-form-item>

          <el-form-item label="客户类型">
            <el-input v-model="formLine.customeType" placeholder="客户类型"></el-input>
          </el-form-item>

          <el-form-item label="邮箱">
            <el-input v-model="formLine.email" placeholder="邮箱"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="clickSeacher(formLine)">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="button">
        <el-button type="primary" size="small" icon="el-icon-plus" @click="addButtonEvent"
          >新增客户</el-button
        >
        <el-button
          type="success"
          size="small"
          icon="el-icon-download"
          @click="downloadTemplate"
          >下载模板</el-button
        >
        <el-button type="warning" size="small" icon="el-icon-upload2">批量导入</el-button>

        <el-button
          type="success"
          size="small"
          icon="el-icon-upload2"
          @click="batchExportButoon"
          >批量导出</el-button
        >

        <!-- scope.$index 数组索引 -->
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          @click="handleDeleteBatch()"
          >批量删除</el-button
        >
      </div>
    </div>
    <div class="cotent">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        header-row-class-name="active-header"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>

        <el-table-column prop="customerName" label="客户名称" width="180" align="center">
        </el-table-column>

        <el-table-column
          prop="customerAbbreviation"
          label="客户简称"
          width="100"
          align="center"
         
        >
        </el-table-column>
        <el-table-column
          prop="countriseRegions"
          label="国家地区"
          width="100"
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="meritoProduct"
          label="主营产品"
          align="center"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>

        <!-- <el-table-column
          prop="reserved1"
          label="姓名"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          prop="reserved1"
          label="性别"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column> -->

        <el-table-column prop="email" label="邮箱" align="center" show-overflow-tooltip>
        </el-table-column>

        <el-table-column
          prop="customeType"
          label="客户类型"
          align="center"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>

        <!-- <el-table-column prop="incomeType" label="企业网站" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="reserved1" label="固定电话" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="reserved1" label="手机/电话" align="center" show-overflow-tooltip>
        </el-table-column> -->

        <el-table-column label="操作" align="center" width="180">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              type="primary"
              icon="el-icon-edit"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
              icon="el-icon-delete"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination"></div>

      <el-dialog
        :title="title"
        :visible.sync="customerDialog"
        width="58%"
        @closed="closed()"
      >
        <el-form
          ref="formRef"
          label-position="righ"
          :inline="true"
          label-width="100px"
          v-model="dialogObject"
          class="demo-form-inline"
          size="medium "
        >
          <el-form-item label="客户名称" class="form-item-spacing">
            <el-input
              v-model="dialogObject.customerName"
              placeholder="客户名称"
              class="input-width"
            ></el-input>
          </el-form-item>

          <el-form-item label="客户简称" class="form-item-spacing">
            <el-input
              v-model="dialogObject.customerAbbreviation"
              placeholder="客户简称"
              class="input-width"
            ></el-input>
          </el-form-item>

          <el-form-item label="国家" class="form-item-spacing">
            <el-input
              v-model="dialogObject.countriseRegions"
              placeholder="国家"
              class="input-width"
            ></el-input>
          </el-form-item>

          <el-form-item label="客户类型" class="form-item-spacing">
            <el-input
              v-model="dialogObject.customeType"
              placeholder="客户类型"
              class="input-width"
            ></el-input>
          </el-form-item>

          <el-form-item label="邮箱" class="form-item-spacing">
            <el-input
              v-model="dialogObject.email"
              placeholder="邮箱"
              class="input-width"
            ></el-input>
          </el-form-item>

          <!-- 新增 -->
          <el-form-item label="姓名" class="form-item-spacing">
            <el-input
              v-model="dialogObject.name"
              placeholder="姓名"
              class="input-width"
            ></el-input>
          </el-form-item>

          <el-form-item label="性别" class="form-item-spacing">
            <el-select v-model="dialogObject.sex" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="企业网站" class="form-item-spacing">
            <el-input
              v-model="dialogObject.enterpriseWebsite"
              placeholder="企业网站"
              class="input-width"
            ></el-input>
          </el-form-item>

          <el-form-item label="固定电话" class="form-item-spacing">
            <el-input
              v-model="dialogObject.fixedLine"
              placeholder="固定电话"
              class="input-width"
            ></el-input>
          </el-form-item>

          <el-form-item label="手机/电话" class="form-item-spacing">
            <el-input
              v-model="dialogObject.phone"
              placeholder="手机/电话"
              class="input-width"
            ></el-input>
          </el-form-item>

          <el-col :span="24">
            <el-form-item label="备注">
              <el-input
                type="textarea"
                v-model="dialogObject.remark"
                placeholder="备注"
                class="remark"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="customerDialog = false">取 消</el-button>
          <el-button type="primary" @click="addCustomer(dialogObject)">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog
        title="批量导出客户"
        :visible.sync="batchExportDialog"
        width="58%"
        @closed="closed()"
      >
        <el-form ref="formRef" :inline="true" v-model="formLine" class="demo-form-inline">
          <el-form-item label="客户名称">
            <el-input v-model="formLine.customerName" placeholder="客户名称"></el-input>
          </el-form-item>

          <el-form-item label="国家">
            <el-input v-model="formLine.countriseRegions" placeholder="国家"></el-input>
          </el-form-item>

          <el-form-item label="客户类型">
            <el-input v-model="formLine.customeType" placeholder="客户类型"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="clickSeacher(formLine)">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="resetForm">重置</el-button>
          </el-form-item>

          <div class="export">
            <el-row :gutter="10">
              <el-col :span="2"
                ><div class="grid-content bg-purple">
                  <el-button type="success" @click="exportCurrent(formLine)"
                    >导出</el-button
                  >
                </div></el-col
              >
              <el-col :span="2"
                ><div class="grid-content bg-purple"></div>
                <el-button type="warning" @click="exportAll(formLine)"
                  >导出全部</el-button
                >
              </el-col>
            </el-row>
          </div>
        </el-form>

        <!-- <span slot="footer" class="dialog-footer">
          <el-button @click="batchExportDialog = false">取 消</el-button>
          <el-button type="primary" @click="addCustomer(dialogObject)">确 定</el-button>
        </span> -->

        <el-table
          :data="tableData"
          style="width: 100%"
          border
          header-row-class-name="active-header"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            prop="customerName"
            label="客户名称"
            width="180"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="countriseRegions"
            label="国家地区"
            width="180"
            align="center"
          >
          </el-table-column>

          <!-- <el-table-column
          prop="reserved1"
          label="姓名"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          prop="reserved1"
          label="性别"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column> -->

          <el-table-column
            prop="customeType"
            label="客户类型"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>

          <!-- <el-table-column prop="incomeType" label="企业网站" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="reserved1" label="固定电话" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="reserved1" label="手机/电话" align="center" show-overflow-tooltip>
        </el-table-column> -->
        </el-table>
      </el-dialog>

      <Paginations
        :pageSize="pageSize"
        :total="total"
        @currentChange="currentChange"
        @sizeChange="sizeChange"
      ></Paginations>
    </div>
  </div>
</template>

<script>
import Paginations from "@/components/pagnation/Pagnation.vue";
import { Message } from "element-ui";
export default {
  components: {
    Paginations,
 
  },

  created() {
    this.submitEvent(this.formLine);
  },

  data() {
    return {
      //表单
      formLine: {
        customerName: "",
        customerAbbreviation: "",
        countriseRegions: "",
        customeType: "",
        email: "",
        currentPage: 1,
        pageSize: 10,
      },

      // 表单总数据条数
      total: 11,

      pageSize: 10,

      //表格数据
      tableData: [],

      //多选值
      multipleSelection: [],

      //新增客户弹窗
      customerDialog: false,

      //批量导出客户弹窗
      batchExportDialog: false,

      //dialogobject
      dialogObject: {},

      //弹框名称
      title: "",

      options: [
        {
          value: 0,
          label: "男",
        },
        {
          value: 1,
          label: "女",
        },
        {
          value: 2,
          label: "其它",
        },
      ],
    };
  },

  methods: {
    //导出当前页面
    exportCurrent() {
      const message = "是否想导出当前页面的数据";
      this.formLine.isAll = null;
      this.customerExport(message);
    },

    //导出所有数据
    exportAll() {
      const message = "是否想导出所有数据";
      this.formLine.isAll = 1;
      this.customerExport(message);
    },

    //批量导出客户
    async customerExport(data) {
      try {
        const message = data;

        this.$confirm(message, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            //从你的formLine对象提取参数
            const params = this.formLine;

            // 调用封装好的downloadTemplate函数并传递参数

            // 发送GET请求下载文件，设置responseType为'blob'
            const response = await this.$api.exportCustomer(params);
            console.log("response数据"+response);

            //创建一个blob url指向下载的文件数据
            const url = window.URL.createObjectURL(new Blob([response.data]));

            // 创建一个临时的a标签用于触发下载
            const link = document.createElement("a");
            link.href = url;
            // 设置下载的文件名，这里你可以根据实际情况设置或从响应头中获取
            link.setAttribute("download", "customer_template.xlsx");

            // 将链接添加到DOM中，触发下载，然后移除该元素
            document.body.appendChild(link);

            link.click();

            document.body.removeChild(link);

            // 释放创建的URL对象
            window.URL.revokeObjectURL(url);
          })
          .catch(() => {
            //将选择的复选框取消选中
            this.$message({
              type: "info",
              message: "已取消导出",
            });
          });
      } catch (error) {
        // 处理请求失败的情况
        console.error("Download failed", error);
      }
    },

    // 下载模板
    async downloadTemplate() {
      try {
        //从你的formLine对象提取参数
        const params = this.formLine;

        // 调用封装好的downloadTemplate函数并传递参数

        // 发送GET请求下载文件，设置responseType为'blob'
        const response = await this.$api.downloadTemplate(params);

        //创建一个blob url指向下载的文件数据
        const url = window.URL.createObjectURL(new Blob([response.data]));

        // 创建一个临时的a标签用于触发下载
        const link = document.createElement("a");
        link.href = url;
        // 设置下载的文件名，这里你可以根据实际情况设置或从响应头中获取
        link.setAttribute("download", "customer_template.xlsx");

        // 将链接添加到DOM中，触发下载，然后移除该元素
        document.body.appendChild(link);

        link.click();

        document.body.removeChild(link);

        // 释放创建的URL对象
        window.URL.revokeObjectURL(url);
      } catch (error) {
        // 处理请求失败的情况
        console.error("Download failed", error);
      }
    },

    //复选框选中操作
    handleSelectionChange(data) {
      console.log("选择行数:" + JSON.stringify(data));
      this.multipleSelection = data.map((item) => item.id);

      console.log("选择行数:" + this.multipleSelection);
    },

    closed() {
      this.resetForm();
    },

    //批量导出客户按钮
    batchExportButoon() {
      this.dialogObject = {};
      this.batchExportDialog = true;
      this.formLine.pageSize = 150;
      this.submitEvent(this.formLine);
    },
    // 新增客户按钮
    addButtonEvent() {
      this.title = "新增客户";
      this.dialogObject = {};
      this.customerDialog = true;
    },

    currentChange(val) {
      console.log(val);
    },

    //改变页面
    currentChange(val) {
      console.log("父组件页码" + val);
      this.formLine.currentPage = val;
      this.submitEvent(this.formLine);
    },

    //改变一页多少数据
    sizeChange(val) {
      console.log("父组件一页多少数据" + val);
      this.formLine.pageSize = val;
      this.submitEvent(this.formLine);
    },

    //删除客户
    async handleDelete(data) {
      var that = this;
      // const arr = [1, 2, 3, 4, 5];
      // const newArr = arr.map(function (value, index) {
      //   return value * 2;
      // });
      // console.log(newArr); // [2, 4, 6, 8, 10]
      // console.log("处理的数组", +arr);

      //判断你的参数是否为一个数组
      if (!Array.isArray(data)) {
        //如果不是将它变为数组
        data = [data];
      }

      var message = "此操作将永久删除客户 ";
      data.forEach(function (value, index) {
        var obj = that.tableData.find((t) => t.id == value);
        message = message + obj.customerName + " ,";
      });

      console.log("删除方法", data);

      this.$confirm(message, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          console.log("进来了");
          var param = {
            ids: data,
          };

          let res = await this.$api.deleteCustomer(param);
          this.submitEvent(this.formLine);

          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          //将选择的复选框取消选中
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //批量删除客户
    handleDeleteBatch() {
      if (this.multipleSelection && this.multipleSelection.length > 0) {
        this.handleDelete(this.multipleSelection);
      } else {
        // 显示警告消息
        this.$message({
          message: "请选择你想要删除的客户",
          type: "warning",
        });
      }
    },

    //新增客户
    async addCustomer(data) {
      let res = this.$api.addCustomer(data);
      console.log("新增数据成功", res);

      this.customerDialog = false;
    },

    //编辑表单
    handleEdit(index, data) {
      console.log(data);
      this.dialogObject = data;

      this.title = "编辑客户";
      this.customerDialog = true;
    },

    //点击搜索按钮
    clickSeacher(data) {
      data.currentPage = 1;
      this.submitEvent(data);
    },

    //搜索表单
    async submitEvent(data) {
      console.log(data);

      var obj = {
        //customerName: data.customerName,
        currentPage: 1,
        pageSize: 10,
      };
      const param = JSON.stringify(obj);

      // const config = {
      //   headers: {
      //     "Content-Type": "application/json",
      //     // 可以在这里添加更多的配置
      //   },
      // };
      let res = await this.$api.customerList(this.formLine);

      console.log("客户列表返回数据", res);
      //  console.log("客户列表返回数据2", res.data);
      this.tableData = res.data.data;

      //       if (myObject && myObject.total) { ... }
      // myObject && myObject.total：这是一个逻辑与(&&)运算表达式，用于连续检查两个或多个条件是否都为真（true）。

      // myObject：首先检查myObject是否有“真值”（在JavaScript中，null、undefined、0、NaN、空字符串("")和false被视为“假值”（falsy），
      //其他值被视为“真值”（truthy））。如果myObject是null或undefined，那么这个表达式的结果就是假（false），
      //JavaScript引擎就不会继续执行后面的条件检查，整个if语句中的代码块也不会被执行。

      // myObject.total：如果myObject通过了第一项检查（即它不是null或undefined），那么表达式会继续检查myObject.total。
      //这一步主要是为了确认total属性存在于myObject上，且其值不是假值（比如不是undefined、null、0、""、NaN或false）。
      //如果myObject.total也有真值，那么整个表达式的结果为真（true），if语句中的代码块将被执行。

      // { ... }

      if (
        this.tableData &&
        this.tableData.length > 0 &&
        this.tableData[0].total !== undefined
      ) {
        this.total = this.tableData[0].total;
      }

      console.log(res.data.data);
    },

    // 重置表单
    resetForm() {
      if (!this.batchExportDialog) {
        this.formLine = { currentPage: 1, pageSize: 10 };
        this.pageSize = 10;
        // this.sizeChange = 10;
      } else {
        this.formLine = { currentPage: 1, pageSize: 150 };
      }

      this.submitEvent(this.formLine);
    },

    // 获取产品列表数据
    async customerList(param) {
      let res = await this.$api.projectList(param);
      console.log("产品列表数据", res);
    },
  },
};
</script>

<style scoped>
.export {
  padding: 10px;
}
.amountStyle {
  margin-right: 150px;
  float: right;
}
.header {
  background-color: white;
  padding: 10px;
  margin-bottom: 20px;
  width: 100%;
}

.content {
  background-color: white;
}

.button {
  padding-top: 15px;
  width: 100%;
}

.el-form-item {
  margin-bottom: 12px;
}

/* 深层穿透 
当样式不起作用时，可以用深层穿透
 /deep/ 

*/
.active-header {
  color: #333;
}
.pagination {
  padding-top: 50px;
}

/* 样式文件或<style>标签内 */
.form-item-spacing {
  margin-bottom: 30px;
}

.input-width {
  width: 320px;
}

.remark {
  width: 500px;
  height: 320px;
}
</style>
